<template>
  <div>
    <img
      src="https://img.zcool.cn/community/03784eb59391d19a8012193a342bae4.jpg"
      alt=""
    />
    <!-- <common :loginForm="loginForm"></common> -->
    <!-- <sms></sms> -->
    <qr></qr>
  </div>
</template>

<script>
import common from "./commonLogin.vue";
import sms from "./smsLogin.vue";
import qr from "./qrLogin.vue";
// 校验验证码
var validateCaptcha = (rule, value, callback) => {
  if (value) {
    callback();
  } else {
    callback("请输入验证码");
  }
};
// 校验用户名
var validateUsername = (rule, value, callback) => {
  //   console.log(rule);
  //   console.log(value);
  // 3-16位字母、数字、下划线
  var uPattern = /^[a-zA-Z0-9_-]{3,16}$/;

  if (uPattern.test(value)) {
    callback();
  } else {
    callback("3-16位字母、数字、下划线");
  }
};
// 校验密码
var validatePassword = (rule, value, callback) => {
  var uPattern = /^[a-zA-Z0-9_-]{4,16}$/;
  if (uPattern.test(value)) {
    callback();
  } else {
    callback("请输入密码");
  }
};

// 修改element-ui的样式
// 1、打开调试器，找准类名，覆盖样式
// 2、看权重，使用!important
// 3、使用深度选择器>>>(sass使用)或 /deep/(less使用)
export default {
  data() {
    return {
      loginForm: {
        username: "",
        password: "",
        captcha: "",
      },
      rules: {
        username: [{ validator: validateUsername, trigger: "blur" }],
        password: [{ validator: validatePassword, trigger: "blur" }],
        captcha: [{ validator: validateCaptcha, trigger: "blur" }],
      },
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
  components: {
    common,
    qr,
    sms,
  },
};
</script>
